<template>
  <view
    id="indexpage"
    class="content en"
    style="background-image: url('/static/images/index_bg_index_1.gif')"
  >
    <view class="allContent">
      <view class="content2">
        <view class="bottom">
          <view class="vcamera">
            <div class="flex-center-center submit-btn">
              <image
                class="camera"
                src="@/static/images/camera.png"
                :draggable="false"
                mode="cover"
              />
              <view class="bt-text" @click="goto()"> 开启测肤</view>
            </div>
          </view>
          <view
            id="bottomGroup"
            class="bottomGroup"
            style="color: rgb(255, 58, 128)"
          >
            <view class="agreement flex-center-center">
              <view
                id="agree_no"
                style="
                  border: 1px solid rgb(241, 132, 161);
                  color: rgb(254, 214, 223);
                "
              >
              </view>
              <!-- <view> 我已阅读并同意</view>
              <view> 《用户隐私协议》</view> -->
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="cover" style="display: none"> </view>
    <view class="helpcontent" style="display: none">
      <view class="helptitle" style="border-left: 3px solid rgb(255, 58, 128)">
        注意事项</view
      >
      <view class="close"> 跳过 (5s)</view>
      <image class="tips_header" style="position: relative">
        <div
          style="
            background-image: url('@/static/tips_head.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
          "
        ></div>
        <uni-resize-sensor>
          <div><div></div></div>
          <div><div></div></div>
        </uni-resize-sensor>
        <image src="@/static/tips_head.png" :draggable="false" />
      </image>
      <view class="tips" style="color: rgb(255, 58, 128)">
        —— 满足以下要求要求结果更准哦 ——</view
      >
      <view class="tipsicon">
        <view class="tipsitem">
          <image style="position: relative">
            <div
              style="
                background-image: url('@/static/tips_hair_1.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;
              "
            ></div>
            <uni-resize-sensor>
              <div><div></div></div>
              <div><div></div></div>
            </uni-resize-sensor>
            <img src="@/static/tips_hair_1.png" :draggable="false" />
          </image>
          <view> 拨拢长发</view>
        </view>
        <view class="tipsitem">
          <image style="position: relative">
            <div
              style="
                background-image: url('@/static/tips_moshubang_1.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;
              "
            ></div>
            <uni-resize-sensor>
              <div><div></div></div>
              <div><div></div></div>
            </uni-resize-sensor>
            <img src="@/static/tips_moshubang_1.png" :draggable="false" />
          </image>
          <view> 关闭美颜</view>
        </view>
        <view class="tipsitem">
          <image style="position: relative">
            <div
              style="
                background-image: url('@/static/tips_glass_1.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;
              "
            ></div>
            <uni-resize-sensor>
              <div><div></div></div>
              <div><div></div></div>
            </uni-resize-sensor>
            <img src="@/static/tips_glass_1.png" :draggable="false" />
          </image>
          <view> 摘掉眼镜</view>
        </view>
        <view class="tipsitem">
          <image style="position: relative">
            <div
              style="
                background-image: url('@/static/tips_sunny_1.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;
              "
            ></div>
            <uni-resize-sensor>
              <div><div></div></div>
              <div><div></div></div>
            </uni-resize-sensor>
            <img src="@/static/tips_sunny_1.png" :draggable="false" />
          </image>
          <view> 光线充足</view>
        </view>
      </view>
      <uni-button class="btn btnpromos" style="background: rgb(255, 58, 128)">
        我知道了</uni-button
      >
    </view>
    <view class="en-tip">
      <view class="en-tip-title-wrap flex-center-center">
        <view class="en-tip-title"> 亲，满足以下条件测肤效果更好哦</view>
      </view>
      <view class="en-tip-info-wrap">
        <view class="en-tip-info">
          <view class="en-tip-dot"> </view> 不戴眼镜</view
        >
        <view class="en-tip-info">
          <view class="en-tip-dot"> </view> 无美颜</view
        >
        <view class="en-tip-info">
          <view class="en-tip-dot"> </view> 无刘海遮挡</view
        >
        <view class="en-tip-info">
          <view class="en-tip-dot"> </view> 照片清晰</view
        >
        <view class="en-tip-info">
          <view class="en-tip-dot"> </view> 大头照</view
        >
        <view class="en-tip-info">
          <view class="en-tip-dot"> </view> 正面照片</view
        >
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "Hello",
    };
  },
  onLoad() {},
  methods: {
    goto() {
      uni.navigateTo({ url: "/pages/login/login" });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100vh;
  background: #fff;
  background-position: 50%;
  background-size: cover;
  // font-size: 0;
  font-family: Arial;
  overflow: hidden;
}
.vcamera {
  width: 100%;
  height: calc(23vh);
  position: absolute;
  left: 0;
  bottom: 0;
}
.submit-btn {
  background: linear-gradient(
    90deg,
    rgb(255, 91, 164) 0%,
    rgb(254, 46, 96) 100%
  );
  font-size: 36rpx;
  height: 108rpx;
  width: 200px;
  margin: 0 auto;
  color: #fff;
  border-radius: 66rpx;
  border: 8rpx solid #fff;
  .camera {
    width: 44rpx;
    height: 44rpx;
    margin-right: 24rpx;
  }
}
.agreement {
  position: fixed;
  left: 0;
  bottom: 3vh;
  font-size: 24rpx;
  width: 100%;
  text-align: center;
  z-index: 2;
  color: rgb(255, 58, 128);
}
.en-tip {
  font-size: 22rpx;
  color: #ff3a80;
  position: absolute;
  bottom: calc(23vh);
  width: 100%;
  height: 22vh;
  padding-top: 66rpx;
  display: flex;
  flex-direction: column;
  background-color: #ffd4df;
  .en-tip-title {
    color: #fff;
    border-radius: 32rpx;
    background-color: #ff7ca1;
    height: 54rpx;
    display: flex;
    align-items: center;
    padding: 0 24rpx;
  }
  .en-tip-info-wrap {
    display: flex;
    flex-wrap: wrap;
    padding: 34rpx 0 0 56rpx;
    .en-tip-info {
      width: 33.33%;
      margin-bottom: 22rpx;
      position: relative;
      padding-left: 22rpx;
      box-sizing: border-box;
      .en-tip-dot {
        width: 10rpx;
        height: 10rpx;
        border-radius: 10rpx;
        background: #ff7ca1;
        position: absolute;
        left: -4rpx;
        top: 10rpx;
      }
    }
  }
}
</style>
